<style>
.options { -webkit-transform: scale(.7); -moz-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7); -webkit-backface-visibility: hidden; opacity: 0; -webkit-transition: all 300ms; -moz-transition: all 300ms; transition: all 300ms }
.playground.opened { visibility: visible }
.opened .options { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1 }
.pg-cal { text-align: center; display: block }
.pg-val { display: block; float: left; width: 95px; margin-right: 13px; margin-bottom: 10px; padding: 5px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; text-transform: uppercase; white-space: nowrap; color: #5f5f5f; border: 1px solid transparent }
.pg-val:hover { cursor: pointer }
.pg-val.active, .pg-val:hover { color: #000 }
.pg-val i { display: block }
.playground { position: fixed; top: 50%; left: 50%; width: 620px; height: auto; z-index: 9999; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); visibility: hidden; -webkit-backface-visibility: hidden }
.playground>.options { position: relative; background: #fff; border: 1px solid #eeeeee; border-radius: 2px; overflow: hidden; padding: 15px 0 }
.playground>.options:before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 40%; background-color: #f5f5f5; z-index: -1 }
.playground h6 { font-size: 11px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif }
.playground .pg-close { position: absolute; padding: 15px; right: 0; cursor: pointer }
.playground select { width: 100%; font-size: 10px; text-transform: uppercase; outline: 0 !important; letter-spacing: 1px }
.playground .options-container { width: 40%; float: left; padding: 3px 15px; display: inline-table }
.playground .options-container.color-options { width: 60%; }
.playground small { font-size: 80% }
.playground .cs_color { position: relative; display: inline-block; width: 95px; margin-right: 12px; margin-bottom: 5px; padding: 5px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid transparent }
.cs_color>div:first-child { width: 30%; height: 12px; float: left }
.cs_color>div:nth-child(2) { width: 70%; height: 12px; float: left }
.cs_color>div:nth-child(3) { width: 30%; height: 71px; float: left }
.cs_color>div:nth-child(4) { width: 70%; height: 71px; background-color: #f1f4f9; float: left }
.pg-val.active, .pg-val:hover, .playground .cs_color.active, .playground .cs_color:hover { border: 1px solid #a55ee7 }
.playground .cs_1 div:first-child { background: #147bd0 }
.playground .cs_1 div:nth-child(2) { background: #1582dc }
.playground .cs_1 div:nth-child(3) { background: #2e353d }
.playground .cs_2 div:first-child { background: #14a5d3 }
.playground .cs_2 div:nth-child(2) { background: #15acdc }
.playground .cs_2 div:nth-child(3) { background: #4f576b }
.playground .cs_3 div:first-child { background: #353d46 }
.playground .cs_3 div:nth-child(2) { background: #353d46 }
.playground .cs_3 div:nth-child(3) { background: #353d46 }
.playground .cs_4 div:first-child { background: #fff; height: 10px; border: 1px solid #eee; border-right: 0 }
.playground .cs_4 div:nth-child(2) { background: #fff; height: 10px; border: 1px solid #eee; border-left: 0 }
.playground .cs_4 div:nth-child(3) { background: #39424c }
.playground .cs_5 div:first-child { background: #2dbe60 }
.playground .cs_5 div:nth-child(2) { background: #2dbe60 }
.playground .cs_5 div:nth-child(3) { background: #f1f4f9 }
.playground .cs_5 div:nth-child(4) { background: #fff }
.playground .cs_6 div:first-child { background: #23b7e5 }
.playground .cs_6 div:nth-child(2) { background: #23b7e5 }
.playground .cs_6 div:nth-child(3) { background: #ffffff }
.playground .cs_6 div:nth-child(4) { background: #f5f7fa }
.playground .cs_7 div:first-child { background: #FFAAD7 }
.playground .cs_7 div:nth-child(2) { background: #FFAAD7 }
.playground .cs_7 div:nth-child(3) { background: #fff }
.playground .cs_7 div:nth-child(4) { background: #f5f7fa }
.playground .cs_8 div:first-child { background: 0 0 }
.playground .cs_8 div:nth-child(2) { background: 0 0 }
.playground .cs_8 div:nth-child(3) { background: 0 0 }
.playground .cs_8 div:nth-child(4) { background: 0 0 }
.pg-footer { position: absolute; width: 100%; text-align: right; bottom: 5px; right: 5px }
</style>
<div class="playground hidden-xs">
	<div class="options">
   		<div class="pg-close ti-close"></div>
   		<div class="options-container color-options">
   			<h3>皮肤</h3>
			#foreach($!obj in $!themeMap.entrySet())
   			<a onclick="__changeTheme('$!obj.value')" href="$!basePath/framework/css/skins/$!{obj.value}.css" class="css_orange cs_color cs_${velocityCount} #if($!theme==$!obj.value)active#end"> <div></div> <div></div> <div></div> <div></div> </a>
   			#end
			<script type="text/javascript">
   				function __changeTheme(theme){
   					jQuery.post("$!basePath/index/change/theme", {theme:theme}, function(){
   					    window.location.reload(true);
					});
   				}
   			</script>
   		</div>
   		<div class="options-container">
   			<h3>布局</h3>
            <a class="pg-val toggle-theme toggle-vertical toggle-active #if($!layout == '')active#end" layout="" href="javascript:;">
                <img src="$!basePath/framework/img/panel/normal.png" alt="">
            </a>
			<a class="pg-val toggle-theme toggle-vertical toggle-active #if($!layout == 'layout-v')active#end" layout="layout-v" href="javascript:;">
				<img src="$!basePath/framework/img/panel/vertical.png" alt="">
			</a>
			<a class="pg-val toggle-theme toggle-vertical toggle-active #if($!layout == 'layout-v2')active#end" layout="layout-v2" href="javascript:;">
				<img src="$!basePath/framework/img/panel/vertical2.png" alt="">
			</a>
			<a class="pg-val toggle-theme toggle-sidebar toggle-active #if($!layout == 'small-menu')active#end" layout="small-menu" href="javascript:;" >
				<img src="$!basePath/framework/img/panel/small.png" alt="">
			</a>
		</div>
	</div>
</div>